<template>
  <div class="weather-top" v-loading="loading">
    <div class="weather" style="color: #fff; background-color:#a16219; height: 250px;">
      <p class="op_weather4_twoicon_date">{{weather.city}}&nbsp:&nbsp&nbsp<span>{{weather.date}}</span>{{weather.week}}
      </p>
      <p class="op_weather4_twoicon_date"><span class="kong">实时空气质量&nbsp:</span><em
        style="background: rgb(255, 153, 0);">{{aqi.aqi}}{{aqi["quality"]}}</em></p>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="op_weather4_twoicon_shishi">
              <img :src="'http://101.37.161.89/wordpress/wp-content/themes/stormy/img/'+weather.img +'.png'" alt="">
            </div>
            <div class="op_weather4_twoicon_shishi_info">
              <span class="op_weather4_twoicon_shishi_title">{{weather.temp}}</span> <span
              class="op_weather4_twoicon_shishi_data"><i class="op_weather4_twoicon_shishi_sup">℃</i>
					          <i class="op_weather4_twoicon_shishi_sup">{{weather.weather}}</i>
				          </span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light op_weather4_twoicon_shishi_bottom">
            <span>{{weather.templow}}~{{weather.temphigh}}℃</span>
            <p>{{weather.weather}}</p>

            <p>{{weather.winddirect}}{{weather.windpower}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "weather",
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        weather: '',
        aqi: "",
        loading: true
      }
    },
    mounted: function () {

      this.over();
    },
    methods: {
      over: function () {
        var map, geolocation;
        var that = this;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
          resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function () {
          geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
          AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });

        //解析定位结果
        function onComplete(data) {
          AMap.plugin('AMap.Geocoder', function () {
            var geocoder = new AMap.Geocoder({
              city: "010"//城市，默认：“全国”
            });
            geocoder.getAddress(data.position.getLng() + "," + data.position.getLat(), function (status, result) {
              if (status == 'complete') {
                that.ddr = result.regeocode.addressComponent.district;
                axios.get('https://bird.ioliu.cn/weather?city=' + that.ddr).then(re => {
                  that.weather = re.data.result;
                  that.aqi = that.weather.aqi;
                  that.loading = false;
                })

              }
            })
          });
        }

        //解析定位错误信息
        function onError(data) {
          // 失败后调用百度的ip定位
          var myCity = new BMap.LocalCity();
          myCity.get(function (result) {
            var cityName = result.name;
            axios.get('https://bird.ioliu.cn/weather?city=' + cityName).then(re => {
              that.weather = re.data.result;
              that.aqi = that.weather.aqi;
              that.loading = false;
              return that.weather;
            })
          });
          myCity = null;
          console.log(myCity);
        }
      },

    }
  }
</script>

<style scoped>
  .op_weather4_twoicon_date {
    padding: 12px 0 0 12px;
    text-align: justify;
    margin-bottom: 0;
  }

  .weather {
    padding-top: 20px;
    padding-left: 10px;
  }

  .op_weather4_twoicon_shishi {
    width: 70px;
    height: 70px;
    margin: 0 auto;
  }

  .op_weather4_twoicon_shishi_info {
    position: relative;
    text-align: center;
  }

  .op_weather4_twoicon_shishi_title {
    font-size: 48px;
    line-height: 64px;
    display: inline-block;
    font-family: Arial;
    text-shadow: 1px 1px 1px #555;
  }

  .grid-content {
    margin-top: 9px;
    width: 131px;
  }

  .op_weather4_twoicon_shishi_data {
    position: relative;
    display: inline-block;
  }

  .op_weather4_twoicon_shishi_sup, .op_weather4_twoicon_shishi_sub {
    display: block;
    text-align: left;
    font-style: normal;
    text-shadow: 1px 1px 1px #555;
  }

  .op_weather4_twoicon_shishi_bottom {
    position: relative;
    text-align: center;
    padding: 10px 20px 0 0;
    left: 40px;
  }

  .op_weather4_twoicon_date > em {
    display: inline-block;
    margin-left: 5px;
    width: 82px;
    line-height: 18px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
  }

  .op_weather4_twoicon_shishi_bottom > p {
    margin-top: 1em;
    margin-bottom: 1em;
    color: #800080;
  }

  p {
    margin-top: 0;
  }
</style>
